<script>
import paper from "paper";
import tool from "@/mixins/toolBar/tool";
import axios from "axios";
import { mapMutations } from "vuex";

export default {
  name: "EnhancementTool",
  mixins: [tool],
  template:
    "<div><i v-tooltip.right='tooltip' class='fa fa-x' :class='icon' :style='{ color: iconColor }' @click='click' @mouseover='handleMouseover'></i><br></div>",
  props: {
    image: {
      type: Object,
      required: true,
    },
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      icon: "fa-caret-square-o-up",
      name: "增强",
      cursor: "move",
      centerPoint: null,
      timer: null,
      movePoint: null,
      enhanceAnnotationId: 0,
    };
  },
  methods: {
    onMouseDown(event) {
      if (this.centerPoint != null) {
        this.centerPoint.remove();
      }
      let point = this.createPoint(event.point);
      let pointObject = {
        x: point.x,
        y: point.y,
        image: this.image.id,
      };
      this.updatePoint(pointObject);

      this.centerPoint = new paper.Path.Circle(point, 5);
      this.centerPoint.fillColor = "#ff0000";
      this.centerPoint.data.point = point;
      this.$emit("openEnhanceObjectDialog", this.enhanceAnnotationId);
    },
    onMouseMove(event) {
      this.movePoint = event.point;
    },
    ...mapMutations(["updateEnhancePonit", "updateEnhanceTargetAnnotationId"]),
    updatePoint(point) {
      this.updateEnhancePonit(point);
    },
    createPoint(point) {
      let paperPoint = new paper.Point(point.x, point.y);
      return paperPoint;
    },
    handleMouseover() {
      if (this.isActive) {
        this.$parent.showEnhancementOption = true;
      } else {
        this.$parent.showEnhancementOption = false;
      }
    },
    click() {
      this.update();
      this.$parent.showAutoAnnotationOption = false;
      if (!this.isDisabled) {
        this.$parent.showEnhancementOption = true;
      }
      // 暂时注释掉来测试
      axios
        .post(`/api/annotation/auto/whole_image?image_id=${this.image.id}`)
        .then((response) => {
          this.update();
          console.log(response);
        });
    },

    handleMouseMove(event) {
      clearTimeout(this.timer);

      this.timer = setTimeout(() => {
        this.getAnnotationInCanva();
      }, 500);
    },
    getAnnotationInCanva() {
      if (this.movePoint != null) {
        let x = this.movePoint.x + this.width / 2;
        let y = this.movePoint.y + this.height / 2;

        if (
          x < this.width &&
          x > 0 &&
          y < this.height &&
          y > 0
        ) {
          console.log("方法被调用了");
          console.log(
            x + " " + y + " " + "image_id:" + " " + this.$parent.image.id
          );
          axios
            .post(
              `/api/annotation/find_annotation_which_has_this_point?image_id=${
                this.$parent.image.id
              }&x=${x}&y=${y}`
            )
            .then((response) => {
              if (response.data != null) {
                console.log(response.data.id);
                this.enhanceAnnotationId = response.data.id;
                this.updateEnhanceTargetAnnotationId(response.data.id);
              } else {
                this.updateEnhanceTargetAnnotationId(-999);
              }
            });
        }
      }
    },
  },
  computed: {
    isDisabled() {
      return false;
    },
  },
};
</script>
